﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Demo4</title>
    <style type="text/css">
    html {
        font-family: Verdana; 
        background-color: White;  
    }
    
    #mycontainer div {
        background-color:White;
        border: solid 2px black;
        padding: 5px;   
        margin: 5px;
    }
	
	img{
		 width: 60px; 
		 float: left;
		 margin-right: 5px;
	}
    </style>
</head>
<body>
    
    <h1>Agenda</h1>

    <!-- container template -->
    <div id="mycontainer"></div>

    <!-- agenda Template -->
    <script id="mytemplate" type="text/html">
		<div>
		<img src="{{= foto }}" /> <br/>
        Nome: {{= nome }} <br />
        Tema: {{= tema }}<br />
		<br />
    </div>
    </script>

    <script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="Scripts/jquery.tmpl.js" type="text/javascript"></script>
    <script  type="text/javascript">

        var agenda = [
            {nome:"Hugo Santos", tema:"jQuery: Write less, do more", foto:"eu_min.jpg"},
            {nome:"Antonio Costa", tema: "Tudo o que sempre quis saber sobre Linq", foto:"other.jpg" },            
			{nome:"Marta Silva", tema: "nHibernate: Introdução", foto:"other.jpg" },            
			{nome:"Joaquim Nunes", tema: "Novidades do EF4", foto:"other.jpg" },            
            {nome:"Marco Tavares", tema: "VS2010 & jQuery", foto:"other.jpg" }            
        ];

        $("#mytemplate").render(agenda).appendTo("#mycontainer");

    </script>
</body>
</html>
